<header>
    <div class="left">
        <app-pop-out></app-pop-out>
    </div>
    <div class="center">
        <span class="title">{{'settings' | i18n}}</span>
    </div>
    <div class="right"></div>
</header>
<content>
    <div class="box list">
        <div class="box-header">{{'manage' | i18n}}</div>
        <div class="box-content single-line">
            <a class="box-content-row box-content-row-flex text-default" routerLink="/folders">
                <div class="row-main">{{'folders' | i18n}}</div>
                <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
            </a>
        </div>
    </div>
    <div class="box list">
        <div class="box-header">{{'security' | i18n}}</div>
        <div class="box-content single-line">
            <div class="box-content-row display-block" appBoxRow>
                <label for="lockOption">{{'lockOptions' | i18n}}</label>
                <select #lockOptionsSelect id="lockOption" name="LockOptions" [ngModel]="lockOption"
                    (ngModelChange)="saveLockOption($event)">
                    <option *ngFor="let o of lockOptions" [ngValue]="o.value">{{o.name}}</option>
                </select>
            </div>
            <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
                (click)="lock()">
                <div class="row-main">{{'lockNow' | i18n}}</div>
                <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
            </a>
        </div>
    </div>
    <div class="box list">
        <div class="box-header">{{'account' | i18n}}</div>
        <div class="box-content single-line">           
            <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
                (click)="logOut()">
                <div class="row-main">{{'logOut' | i18n}}</div>
                <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
            </a>
        </div>
    </div>
    <div class="box list">
        <div class="box-header">{{'tools' | i18n}}</div>
        <div class="box-content single-line">           
            <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
                (click)="export()">
                <div class="row-main">{{'exportVault' | i18n}}</div>
                <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
            </a>        
            <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
                (click)="import()">
                <div class="row-main">{{'importVault' | i18n}}</div>
                <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
            </a>           
        </div>
    </div>
    <div class="box list">
        <div class="box-header">{{'other' | i18n}}</div>
        <div class="box-content single-line">
            <a class="box-content-row box-content-row-flex text-default" routerLink="/options">
                <div class="row-main">{{'options' | i18n}}</div>
                <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
            </a>
            <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
                (click)="about()">
                <div class="row-main">{{'about' | i18n}}</div>
                <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
            </a>
            <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
                (click)="help()">
                <div class="row-main">{{'helpFeedback' | i18n}}</div>
                <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
            </a>
            <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
                (click)="rate()">
                <div class="row-main">{{'rateExtension' | i18n}}</div>
                <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
            </a>
        </div>
        <div class="box-footer">{{'rateExtensionDesc' | i18n}}</div>
    </div>
</content>
